<template>
  <el-row>
    <el-col :span="12">
      <el-form ref="form" :model="form" label-width="80px" label-position="top">
        <el-form-item
          prop="realName"
          label="姓名"
          :rules="[{required: true, message: ' ', trigger: 'submit'}]">
          <el-input v-model.trim="form.realName"></el-input>
        </el-form-item>
        <el-form-item
          prop="username"
          label="用户名"
          :rules="[{required: true, message: ' ', trigger: 'submit'}]">
          <el-input v-model.trim="form.username"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="手机号码">
          <el-input v-model.trim="form.phone" clearable></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱地址">
          <el-input v-model.trim="form.email" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" style="margin-top: 16px; width:112px">修改</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="10">
      <el-form label-width="80px" label-position="top">
        <el-form-item label="头像">
          <div class="avatar-upload-container">
            <el-avatar :src="imagePath || defaultAvatar" :size="100" style="margin-right: 16px;" />
            <el-upload
              action="/api/util/upload"
              accept="image/*"
              list-type="picture"
              :show-file-list="false"
              :on-success="onAvatarUploadSuccess"
            >
              <el-button icon="el-icon-upload2">更换头像</el-button>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import defaultAvatar from '@/assets/default-avatar.png';
import Security from './Security';

export default {
  data() {
    this.defaultAvatar = defaultAvatar;
    return {
      form: {
        id: null,
        username: '',
        realName: '',
        phone: '',
        email: ''
      },
      imagePath: '',
      roles: []
    };
  },
  mounted() {
    for (let key in this.form) {
      this.form[key] = app.admin[key];
    }
    this.imagePath = app.admin.imagePath;
  },
  methods: {
    async onAvatarUploadSuccess(response, file) {
      const ret = await this.$http.put('/api/admin/avatar', {id: this.form.id, imagePath: response.data.url});
      if (ret.success) {
        this.$message.success('更换成功');
        this.imagePath = response.data.url;
        app.admin.imagePath = this.imagePath;
      }
    },
    onSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        const ret = await this.$http.post('/api/admin/saveAdmin', this.form);
        if (ret.success) {
          this.$message.success('修改成功');
          Object.assign(app.admin, this.form);
        }
      });
    }
  }
}
</script>

<style scoped>
.el-form {
  width: 320px;
}

.avatar-upload-container {
  display: flex;
  place-items: center;
  width: 220px;
}
</style>